<template>
  <div class="wh100">
    <div class="logo">
      <img referrerpolicy="no-referrer" src="@/assets/logo@2x.png" />
    </div>
    <div class="login-box justify-center">
      <div class="login-box__left">
        <img referrerpolicy="no-referrer" src="@/assets/login@2x.png" />
      </div>
      <div class="login-box__right">
        <h2>登录</h2>
        <el-form :hide-required-asterisk="true" label-position="top" ref="ruleForm" :rules="rules" :model="ruleForm" label-width="80px">
          <el-form-item prop="username">
            <div slot="label" class="align-center">
              <img class="loin-img" src="@/assets/zhanghao@2x.png" alt="" />
              <span>账号：</span>
            </div>
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <div slot="label" class="align-center">
              <img class="loin-img" src="@/assets/mima@2x.png" alt="" />
              <span>密码：</span>
            </div>
            <el-input v-model="ruleForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <div slot="label" class="align-center">
              <img class="loin-img" src="@/assets/yzm.png" alt="" />
              <span>验证码：</span>
            </div>
            <div slot="" class="justify-between">
              <el-input style="width: calc(100% - 120px)" v-model="ruleForm.code" maxlength="4" minlength="4"></el-input>
              <img style="height: 44px; cursor: pointer" :src="validateImg" @click="getValidateImg()" />
            </div>
          </el-form-item>

          <el-form-item>
            <el-button :loading="loading" type="primary" style="
                width: 100%;
                margin-bottom: 30px;
                background: #5cfbff;
                color: #000;
              " @click.native.prevent="onSubmit('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getCaptcha } from "@/api/user";
import { mapState, mapMutations } from "vuex";
// import websocket from "@/utils/websocket.js";

export default {
  components: {},
  data() {
    return {
      redirect: undefined,
      otherQuery: {},
      loading: false,
      validateImg: "", //验证码图片
      ruleForm: {
        username: "",
        password: "",
        code: "",
        uuid: ""
      },

      rules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度至少6个字符", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapState("message", ["socket"]),
    ...mapState("user", ["token", "userId"])
  },
  mounted() {
    this.getValidateImg();
  },
  methods: {
    ...mapMutations("message", ["SET_SOCKET"]),

    //获取验证码
    async getValidateImg() {
      let result = await getCaptcha();
      if (result.code == 200) {
        this.ruleForm.uuid = result.data.uuid;
        this.validateImg = result.data.img;
      }
    },
    //获取其他参数
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },

    onSubmit(formName) {
      // console.log(this.redirect, "this.redirect");
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.ruleForm)
            .then(() => {
              this.$router.push({
                path: this.redirect || "/",
                query: this.otherQuery
              });
              this.loading = false;

              let socket = new WebSocket(
                process.env.VUE_APP_SOCKET_API + this.userId
              );
              this.SET_SOCKET(socket);
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>



<style lang="scss" scoped>
input {
  background: #404249 !important;
}
.logo {
  img {
    width: 456px;
    height: 66px;
  }
}

.login-box {
  margin-top: 159px;
  &__left {
    img {
      width: 1000px;
      height: 630px;
    }
  }

  &__right {
    width: 472px;
    height: 630px;
    background: #303136;
    border-radius: 8px;
    border: 1px solid #44484d;
    box-sizing: border-box;
    padding: 40px;
    text-align: left;
    color: #fff;

    .loin-img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }
  }
}
</style>
